<template>
    <TnPopup v-model="showPopup">
        <h1 class="text-[30rpx] font-[300]! mb-0! text-gray-800 my-3 text-center">自有货车进出登记</h1>
        <TnForm :label-width="130" ref="formRef" :model="formData" :rules="formRules" class="w-80! px-3 py-4">
            <TnFormItem :label="item.label" :prop="item.prop" :key="index" v-for="(item, index) in data" :style="{
                '--tn-form-item-label-width': '130rpx'
            }">
                <view v-if="item.component === 'text'" class="text-[#333]">
                    <text>{{ item.value }}</text>
                </view>

                <component :is="components[item.component]" v-model="formData[item.prop!]"
                    :placeholder="`请输入${item.label}`" class="w-full!" />
            </TnFormItem>
            <view class="text-center mt-4">
                <TnButton type="danger" class="mr-4 px-4! py-2!" @click="showPopup = false">取消</TnButton>
                <TnButton type="primary" class="px-4! py-2!" @click="submitForm">创建</TnButton>
            </view>
        </TnForm>
    </TnPopup>
</template>

<script setup lang="ts">
import { TnButton, TnForm, TnFormItem, TnPopup, type FormItemRule, type FormRules } from '@tuniao/tnui-vue3-uniapp';
import { TnInput, TnSwitch, TnCheckbox, TnRadio } from '@tuniao/tnui-vue3-uniapp';
import { reactive, ref } from 'vue';
import { computed } from 'vue';
import { SelectPicker } from '../selectPicker';
import type { Arrayable } from '@tuniao/tnui-vue3-uniapp/utils';
const components = {
    TnInput, TnSwitch, TnCheckbox, TnRadio, SelectPicker, text: 'text'
}
interface FormOPtion {
    label?: string
    prop?: string
    value?: string
    component: 'TnInput' | 'TnSwitch' | 'TnCheckbox' | 'TnRadio' | 'text'
    rules?:  Arrayable<FormItemRule>
}
const props = withDefaults(defineProps<{
    data?: FormOPtion[]
    show?: boolean
}>(), {
    show: true,
    data: () => [] as FormOPtion[]
})

const emit = defineEmits<{
    (e: 'update:show', value: boolean): void
}>()

const formRef = ref()

const defaultFormData = props.data.reduce((acc: {
    data: { [key: string]: any },
    rule: { [key: string]: FormRules }
}, cur) => {
    if (cur.component !== 'text') {
        acc.data[cur.prop!] = cur.value
        acc.rule[cur.prop!] = (cur.rules ?? []) as FormRules
    }
    return acc
}, {
    data: {},
    rule: {}
})

console.log(defaultFormData)

// 表单数据
const formData = reactive(defaultFormData.data)

// 规则
const formRules: FormRules = defaultFormData.rule

const showPopup = computed({
    get() {
        return props.show
    },
    set(val) {
        emit('update:show', val)
    }
})

/* 提交表单 */
const submitForm = () => {
    formRef.value?.validate((valid: any) => {
        if (valid) {
            uni.showToast({
                title: '提交成功',
            })
        } else {
            uni.showToast({
                title: '表单校验失败',
                icon: 'none',
            })
        }
    })
}
</script>

<style scoped>
:deep(.tn-red_text) {
    padding-left: var(--tn-form-item-label-width) !important;
}
</style>